<template>
  <div class="pt-base-uoload" :class="{'disabled': disabled}">
    <el-upload
      class="avatar-uploader flex"
      action="/server/uploadUtil/upload"
      :show-file-list="false"
      :headers="header"
      :disabled="disabled"
      name="upfile"
      :on-error="handleAvatarError"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <div v-if="upLoadImg" class="avatar flex-row-ver">
        <img :src="'http://image.jiaowawang.cn/'+ upLoadImg" >
      </div>
      <div v-else class="last-icon flex-row-ver">
        <i class="el-icon-plus"></i>
      </div>
    </el-upload>
    <el-button class="cat-img" type="text" @click.stop="catMaxImg(upLoadImg)" v-if="upLoadImg && handlerCat"
               size="mini" icon="el-icon-search"></el-button>
    <div class="loading flex-row-ver" v-if="upimgloading"><img src="assets/img/loading.gif"></div>
  
    <div class="img-big-show flex-row-ver" v-if="dialogVisible" @click.stop="dialogVisible = false">
      <img style="max-width: 100%;max-height: 100%;" :src="'http://image.jiaowawang.cn/'+maxImg" @click.stop />
      <i class="close el-icon-close" @click="dialogVisible = false"></i>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'igUpLoad',
    props: {
      handlerCat: {
        type: Boolean,
        default: true
      },
      upLoadImg: '',
      size: {
        type: Number,
        default: 0.5
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        header: { //上传请求头
          token: JSON.parse(sessionStorage.getItem('loginMsg')).token,
          expire: JSON.parse(sessionStorage.getItem('loginMsg')).expire
        },
        maxImg: '',
        upimgloading: false,
        dialogVisible: false
      }
    },
    methods: {
      catMaxImg(img) { //查看大图
        this.maxImg = img
        this.dialogVisible = true
      },
      beforeAvatarUpload(file) { //上传验证
        this.upimgloading = true
        const isImgType = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type == 'image/jpg')
        const limit = (file.size / 1024 / (this.size * 1024)) < 1
        if (!isImgType) {
          this.$message.error('上传图片只能是JPG/png/jpeg 格式!')
          this.upimgloading = false
        }
        if (!limit) {
          this.$message.error(`上传图片大小不能超过 ${this.size}M!`)
          this.upimgloading = false
        }
        return isImgType && limit
      },
      handleAvatarSuccess(response, file, fileList) { //获取图片地址
        this.$emit('getUpLoad', `${response.data.key}`)
        this.upimgloading = false
      },
      handleAvatarError(response, file, fileList) {
        this.$message.error('上传图片失败，请重试')
        this.upimgloading = false
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pt-base-uoload{
    position: relative;
    border: 1px dashed #d9d9d9;
    width: 178px;
    height: 178px;
    &.disabled {
      border: 1px solid #ccc;
    }
    &:hover{
      .cat-img {
        display: block;
      }
    }
    .avatar-uploader{
      width: 100%;
      height: 100%;
      line-height: 100%;
      border-radius: 2px;
      .last-icon {
        width: 100%;
        height: 100%;
        i{
          font-size: 26px;
          color: #999;
        }
      }
      .avatar {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .avatar img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .cat-img {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 99;
      padding: 4px;
      background: rgba(0, 0, 0, .4);
      color: #fff;
      display: none;
    }
    .loading {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 99;
      width: 100%;
      height: 100%;
      background: #f8f8f8;
      img {
        max-width: 100%;
      }
    }
  }
  .img-big-show{
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0, .5);
    padding: 40px;
    box-sizing: border-box;
    .close{
      position: absolute;
      right: 40px;
      top: 40px;
      color: #fff;
      font-size: 48px;
      z-index: 999;
    }
  }
</style>
